<template>
  <view class="container">
    <!-- 景点图片轮播 -->
    <swiper class="swiper" circular autoplay>
      <swiper-item v-for="(item, index) in images" :key="index">
        <image :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 景点信息 -->
    <view class="scenic-info">
      <view class="title">{{ scenic.name }}</view>
      <view class="rating">
        <text class="score">{{ scenic.score }}</text>
        <text class="reviews">"{{ scenic.comment }}"</text>
        <text class="count">{{ scenic.sold }}条点评</text>
      </view>
      <view class="tags">
        <text class="tag" v-for="(tag, index) in scenic.tags" :key="index">{{ tag }}</text>
      </view>
      <view class="location">
        <text class="iconfont icon-location"></text>
        <text>{{ scenic.address }}</text>
        <text class="distance">距您{{ scenic.distance }}km</text>
      </view>
      <view class="open-info">
        <view class="time">
          <text class="label">开放时间：</text>
          <text>{{ scenic.openTime }}</text>
        </view>
        <view class="tel">
          <text class="label">咨询电话：</text>
          <text>{{ scenic.tel }}</text>
        </view>
      </view>
    </view>

    <!-- 门票预订 -->
    <view class="ticket-section">
      <view class="section-title">门票预订</view>
      <view class="ticket-list">
        <view class="ticket-item" v-for="(ticket, index) in tickets" :key="index">
          <view class="info">
            <view class="name">{{ ticket.name }}</view>
            <view class="desc">{{ ticket.desc }}</view>
            <view class="valid">{{ ticket.valid }}</view>
          </view>
          <view class="action">
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{ ticket.price }}</text>
            </view>
            <button class="book-btn" @tap="bookTicket(ticket)">预订</button>
          </view>
        </view>
      </view>
    </view>

    <!-- 景点介绍 -->
    <view class="intro-section">
      <view class="section-title">景点介绍</view>
      <view class="content">
        {{ scenic.description }}
      </view>
    </view>

    <!-- 游客评价 -->
    <view class="review-section">
      <view class="section-header">
        <text class="title">游客评价</text>
        <text class="more">查看全部</text>
      </view>
      <view class="review-list">
        <view class="review-item" v-for="(review, index) in reviews" :key="index">
          <image class="avatar" :src="review.avatar" mode="aspectFill"></image>
          <view class="content">
            <view class="user">
              <text class="name">{{ review.name }}</text>
              <text class="time">{{ review.time }}</text>
            </view>
            <view class="text">{{ review.content }}</view>
            <view class="images" v-if="review.images">
              <image v-for="(img, idx) in review.images" :key="idx" :src="img" mode="aspectFill"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scenicId: 0,
      scenic: {
        name: '',
        score: 0,
        comment: '',
        tags: [],
        address: '',
        distance: 0,
        openTime: '',
        tel: '',
        description: '',
        sold: 0
      },
      images: [],
      tickets: [],
      reviews: []
    }
  },
  onLoad(option) {
    // 获取传递的景点ID
    this.scenicId = option.id || 1;
    console.log('景点ID:', this.scenicId);

    // 加载景点数据
    this.loadScenicData();
  },
  methods: {
    loadScenicData() {
      // 模拟从API获取数据
      // 在实际项目中，这里应该调用接口获取数据

      // 构建的景点数据映射表
      const scenicData = {
        1: {
          name: '故宫博物院',
          score: 4.9,
          comment: '文化底蕴深厚 值得一游',
          tags: ['5A景区', '博物馆', '文化古迹'],
          address: '北京市东城区景山前街4号',
          distance: 2.5,
          openTime: '8:30-17:00 (16:00停止售票)',
          tel: '010-85007421',
          description: '故宫博物院，旧称紫禁城，是中国明清两代的皇家宫殿，也是现今世界上最大规模的宫殿建筑。位于北京市中心，是中国古代宫廷建筑之精华。故宫的建筑面积为72万平方米，有大小宫殿七十多座，房屋九千余间。是世界上现存规模最大、保存最为完整的木质结构古建筑之一。',
          sold: 12345,
      images: [
            'http://114.55.56.174:19000/shzy/故宫.jpg',
            'http://114.55.56.174:19000/shzy/故宫1.png',
            'http://114.55.56.174:19000/shzy/故宫2.png'
      ],
      tickets: [
        {
          id: 1,
          name: '成人票',
          desc: '标准门票',
          valid: '有效期：购买后7天内有效',
          price: 60
        },
        {
          id: 2,
          name: '学生票',
          desc: '需持有效学生证',
          valid: '有效期：购买后7天内有效',
          price: 30
        }
      ],
      reviews: [
        {
          avatar: '/static/images/avatar1.jpg',
          name: '晚风心里吹',
          time: '2024-03-20',
          content: '景区很大，建议提前做好攻略，建议请导游讲解，不然会错过很多精彩的历史故事。',
          images: [
            '/static/images/review1.jpg',
            '/static/images/review2.jpg'
          ]
        },
        {
          avatar: '/static/images/avatar2.jpg',
          name: '蹦蹦虎了',
          time: '2024-03-19',
          content: '人不多，天气很好，拍照效果很棒，值得推荐！'
        }
      ]
        },
        3: {
          name: '八达岭长城',
          score: 4.8,
          comment: '万里长城 雄伟壮观',
          tags: ['5A景区', '世界遗产', '打卡圣地'],
          address: '北京市延庆区八达岭特区',
          distance: 15.8,
          openTime: '7:30-17:30 (16:30停止售票)',
          tel: '010-69121383',
          description: '八达岭长城是万里长城向游人开放最早的地段，是明长城中保存最好的一段，也是最具代表性的一段。八达岭长城为居庸关的重要前哨，建于明朝洪武年间，是万里长城的精华所在，以"雄伟"二字著称于世。',
          sold: 8765,
          images: [
            'http://114.55.56.174:19000/shzy/八达岭长城.jpg',
            'http://114.55.56.174:19000/shzy/八达岭长城1.png',
            'http://114.55.56.174:19000/shzy/八达岭长城2.png'
          ],
          tickets: [
            {
              id: 1,
              name: '成人票',
              desc: '标准门票',
              valid: '有效期：购买后7天内有效',
              price: 40
            },
            {
              id: 2,
              name: '学生票',
              desc: '需持有效学生证',
              valid: '有效期：购买后7天内有效',
              price: 20
            }
          ],
          reviews: [
            {
              avatar: '/static/images/avatar1.jpg',
              name: '风中飞翔',
              time: '2024-03-22',
              content: '爬长城真的很累但很值得！风景太美了，建议早点去人少一些，夏天记得带水和防晒。',
              images: [
                '/static/images/review1.jpg',
                '/static/images/review2.jpg'
              ]
            },
            {
              avatar: '/static/images/avatar2.jpg',
              name: '旅行者小明',
              time: '2024-03-18',
              content: '八达岭是长城中比较好爬的一段，适合带老人孩子一起，缆车也很方便，强烈推荐！'
            }
          ]
        },
        2: {
          "name": "颐和园",
          "score": 4.9,
          "comment": "皇家园林 美丽宁静",
          "tags": ["5A景区", "世界遗产", "园林"],
          "address": "北京市海淀区新建宫门路19号",
          "distance": 8.3,
          "openTime": "7:00-19:00 (18:00停止售票)",
          "tel": "010-62881144",
          "description": "颐和园，始建于清乾隆年间，是中国古代皇家园林之一。园内以昆明湖和万寿山为主体，融合了自然景观与人文建筑，是中国古代园林艺术的典范。",
          "sold": 15234,
          "images": [
            "http://114.55.56.174:19000/shzy/颐和园.png",
            "http://114.55.56.174:19000/shzy/颐和园1.png",
            "http://114.55.56.174:19000/shzy/颐和园2.png"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 40
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 20
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "大海无边",
              "time": "2024-03-15",
              "content": "这里非常适合散步和拍照，特别是昆明湖旁边，环境很安静，适合放松。",
              "images": [
                "/static/images/review1.jpg",
                "/static/images/review2.jpg"
              ]
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "阳光明媚",
              "time": "2024-03-12",
              "content": "园林风光非常迷人，园内的建筑也非常精致，建议早晨前来，空气清新。",
              "images": []
            }
          ]
        },
        4: {
          "name": "大唐不夜城",
          "score": 4.7,
          "comment": "历史与壮丽结合的经典",
          "tags": ['5A景区', '历史遗址', '夜景'],
          "address": "陕西省西安市大唐不夜城",
          "distance": 25.0,
          "openTime": "8:00-18:00 (17:30停止售票)",
          "tel": "010-69121383",
          "description": "长城八达岭是中国最具标志性的长城之一，宏伟壮丽，是游客欣赏长城风貌的最佳地点之一。",
          "sold": 10500,
          "images": [
            "http://114.55.56.174:19000/shzy/大唐不夜城.png",
            "http://114.55.56.174:19000/shzy/大唐不夜城1.png",
            "http://114.55.56.174:19000/shzy/大唐不夜城2.png"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 60
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 30
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "旅行者123",
              "time": "2024-03-25",
              "content": "大唐不夜城的壮丽景色让人震撼，爬到山顶时的风景非常值得。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "快活的人",
              "time": "2024-03-20",
              "content": "在这里感受到历史的重量，值得一来。",
              "images": []
            }
          ]
        },
        5: {
          "name": "天坛公园",
          "score": 4.8,
          "comment": "古老的祭天圣地",
          "tags": ["5A景区", "世界遗产", "文化古迹"],
          "address": "北京市东城区天坛路",
          "distance": 3.0,
          "openTime": "6:00-20:00 (19:30停止售票)",
          "tel": "010-67028835",
          "description": "天坛公园是明清两代皇帝祭天的地方，保存着古代建筑的精华，是中国古代建筑艺术的杰出代表。",
          "sold": 10234,
          "images": [
            "http://114.55.56.174:19000/shzy/天坛公园.png",
            "/static/images/scenic2.jpg",
            "/static/images/scenic3.jpg"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 35
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 18
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "小林子",
              "time": "2024-03-23",
              "content": "这里的建筑风格非常独特，能感受到历史的沉淀，值得慢慢品味。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "摄影爱好者",
              "time": "2024-03-21",
              "content": "园内景色优美，适合拍照，建议早晨前来，游客较少。",
              "images": []
            }
          ]
        },
        6: {
          "name": "鸟巢",
          "score": 4.7,
          "comment": "现代建筑的奇迹",
          "tags": ["5A景区", "奥林匹克遗址", "现代建筑"],
          "address": "北京市朝阳区国家体育场",
          "distance": 5.5,
          "openTime": "9:00-17:00",
          "tel": "010-84378981",
          "description": "鸟巢是2008年北京奥运会的主体育场，外形独特，是现代建筑的代表之一，也是北京的标志性建筑之一。",
          "sold": 8400,
          "images": [
            "http://114.55.56.174:19000/shzy/鸟巢.png",
            "/static/images/scenic2.jpg",
            "/static/images/scenic3.jpg"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 50
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 25
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "向往蓝天",
              "time": "2024-03-10",
              "content": "鸟巢是北京非常有特色的建筑，晚上看灯光效果特别美，适合拍照。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "运动爱好者",
              "time": "2024-03-18",
              "content": "这里是奥运会的遗址，看到如此宏伟的建筑，感到十分震撼。",
              "images": []
            }
          ]
        },
        7: {
          "name": "圆明园",
          "score": 4.6,
          "comment": "古代皇家园林的遗址",
          "tags": ["世界遗产", "园林", "历史遗址"],
          "address": "北京市海淀区圆明园路28号",
          "distance": 12.3,
          "openTime": "7:00-18:00 (17:30停止售票)",
          "tel": "010-62541488",
          "description": "圆明园，曾是清代皇家园林，现为历史遗址。园内有诸多古建筑遗址和美丽的湖泊，是了解中国古代园林艺术的好地方。",
          "sold": 9234,
          "images": [
            "http://114.55.56.174:19000/shzy/圆明园.png",
            "/static/images/scenic2.jpg",
            "/static/images/scenic3.jpg"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 40
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 20
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "探索历史",
              "time": "2024-03-14",
              "content": "这里有着浓厚的历史氛围，虽然许多建筑已经不复存在，但依然可以感受到昔日的辉煌。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "旅行小达人",
              "time": "2024-03-13",
              "content": "园内景色非常美，尤其是在春天，樱花开得特别好，值得一游。",
              "images": []
            }
          ]
        },
        8: {
          "name": "北海公园",
          "score": 4.7,
          "comment": "古老的皇家园林，静谧美丽",
          "tags": ["5A景区", "皇家园林", "文化古迹"],
          "address": "北京市西城区文津街1号",
          "distance": 3.7,
          "openTime": "6:00-20:00",
          "tel": "010-64017322",
          "description": "北海公园，始建于辽代，是一座历史悠久的皇家园林，湖泊、古建筑与花园相结合，构成了一个宁静的绿洲。",
          "sold": 8000,
          "images": [
            "http://114.55.56.174:19000/shzy/北海公园.png",
            "/static/images/scenic2.jpg",
            "/static/images/scenic3.jpg"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 30
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 15
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "绿野仙踪",
              "time": "2024-03-10",
              "content": "北海公园的湖泊非常美丽，春天花开时景色尤其迷人，非常适合悠闲地散步。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "心动时光",
              "time": "2024-03-16",
              "content": "园内景色宜人，适合一家人一起游玩，特别是划船体验，非常愉快。",
              "images": []
            }
          ]
        },
        9: {
          "name": "大钟寺",
          "score": 4.6,
          "comment": "佛教文化的历史遗址",
          "tags": ["历史遗址", "佛教文化", "宗教场所"],
          "address": "北京市海淀区大钟寺路",
          "distance": 6.0,
          "openTime": "8:00-17:00",
          "tel": "010-62362911",
          "description": "大钟寺始建于唐代，是一座具有深厚佛教文化底蕴的寺庙，内有中国最大的铜钟，象征着悠久的历史与文化。",
          "sold": 5120,
          "images": [
            "http://114.55.56.174:19000/shzy/大钟寺.png",
            "/static/images/scenic2.jpg",
            "/static/images/scenic3.jpg"
          ],
          "tickets": [
            {
              "id": 1,
              "name": "成人票",
              "desc": "标准门票",
              "valid": "有效期：购买后7天内有效",
              "price": 25
            },
            {
              "id": 2,
              "name": "学生票",
              "desc": "需持有效学生证",
              "valid": "有效期：购买后7天内有效",
              "price": 12
            }
          ],
          "reviews": [
            {
              "avatar": "/static/images/avatar1.jpg",
              "name": "佛光普照",
              "time": "2024-03-17",
              "content": "这里是一座非常安静的寺庙，充满了佛教的文化氛围，适合冥想。",
              "images": []
            },
            {
              "avatar": "/static/images/avatar2.jpg",
              "name": "悠然见南山",
              "time": "2024-03-12",
              "content": "大钟寺内有着悠久的历史，钟声悠扬，非常适合了解中国的佛教文化。",
              "images": []
            }
          ]
        }
      };

      // 获取当前景点数据
      const currentScenic = scenicData[this.scenicId] || scenicData[1];

      // 更新数据
      this.scenic = {
        name: currentScenic.name,
        score: currentScenic.score,
        comment: currentScenic.comment,
        tags: currentScenic.tags,
        address: currentScenic.address,
        distance: currentScenic.distance,
        openTime: currentScenic.openTime,
        tel: currentScenic.tel,
        description: currentScenic.description,
        sold: currentScenic.sold
      };

      this.images = currentScenic.images;
      this.tickets = currentScenic.tickets;
      this.reviews = currentScenic.reviews;
    },
    bookTicket(ticket) {
      uni.navigateTo({
        url: `/pages/scenic/booking?scenicId=${this.scenicId}&ticketId=${ticket.id}`
      });
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.swiper {
  width: 100%;
  height: 500rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.scenic-info {
  background: #fff;
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .rating {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .score {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff9500;
      margin-right: 20rpx;
    }
    
    .reviews {
      font-size: 28rpx;
      color: #666;
      margin-right: 20rpx;
    }
    
    .count {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .tags {
    margin-bottom: 20rpx;
    
    .tag {
      display: inline-block;
      padding: 4rpx 16rpx;
      font-size: 24rpx;
      color: #4080ff;
      background: rgba(64, 128, 255, 0.1);
      border-radius: 4rpx;
      margin-right: 16rpx;
    }
  }
  
  .location {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
    
    .iconfont {
      font-size: 32rpx;
      color: #4080ff;
      margin-right: 10rpx;
    }
    
    .distance {
      margin-left: auto;
      color: #999;
    }
  }
  
  .open-info {
    font-size: 28rpx;
    color: #666;
    
    .time,
    .tel {
      margin-bottom: 10rpx;
      
      .label {
        color: #999;
      }
    }
  }
}

.ticket-section {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .ticket-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info {
      flex: 1;
      
      .name {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .desc {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 6rpx;
      }
      
      .valid {
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .action {
      display: flex;
      align-items: center;
      
      .price {
        margin-right: 20rpx;
        
        .symbol {
          font-size: 24rpx;
          color: #ff4d4f;
        }
        
        .number {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff4d4f;
        }
      }
      
      .book-btn {
        width: 120rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        background: #4080ff;
        color: #fff;
        font-size: 28rpx;
        border-radius: 28rpx;
      }
    }
  }
}

.intro-section {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .content {
    font-size: 28rpx;
    color: #666;
    line-height: 1.8;
  }
}

.review-section {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .review-item {
    display: flex;
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }
    
    .content {
      flex: 1;
      
      .user {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10rpx;
        
        .name {
          font-size: 28rpx;
          color: #333;
        }
        
        .time {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        margin-bottom: 16rpx;
      }
      
      .images {
        display: flex;
        flex-wrap: wrap;
        
        image {
          width: 160rpx;
          height: 160rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          border-radius: 8rpx;
          
          &:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style> 